<template>
    <div class="ranklist">
        <div class="container">
            <!--都市小说排行-->
            <div class="col-md-3" v-for="(item, index) in category_list">
                <div class="man-t4-list" style="overflow: auto">
                    <div class="man-t1-title">
                        <a href="http://www.mzitu.com/" class="more-link a-link-white ">更多&gt;</a>
                        <h3>{{item.name}}</h3>
                    </div>
                    <ul>
                        <li v-for="(book, index) in item.book_list">
                            <img :src="book.book_img" :alt="book.name" height="10px" id="id_img"
                                 @click="imageJump(book.id)">
                            <router-link :to="'/detail/' + book.id + '/'" class="pull-left">小说:
                                {{book.name.slice(0, 8)}}
                            </router-link>
                            <br>
                            <span class="color-hui pull-left">作者: {{book.author_name}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--分页开始-->
        <div>
            <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :page-size="5"
                    :total="total_count">
            </el-pagination>
        </div>
        <!--分页结束-->
    </div>
</template>

<script>
    export default {
        name: "RankList",
        data() {
            return {
                category_list: [],
                total_count: 0,
            }
        },
        created() {
            this.$axios({
                url: `${this.$settings.base_url}/book/categories/?page=1`,
                method: 'get',

            }).then(response => {
                // console.log('response.data:', response.data);
                this.category_list = response.data.results;
                this.total_count = response.data.count;
            })
        },
        methods: {
            handleCurrentChange(val) {
                // 页码发生变化时执行的方法
                // console.log(val);
                this.$axios({
                    method: 'get',
                    url: `${this.$settings.base_url}/book/categories/?page=${val}`
                }).then(response => {
                    this.category_list = response.data.results;
                    // console.log('this.category_list:', this.category_list);
                })
            },
            imageJump(book_id) {
                this.$router.push(`/detail/${book_id}`);
            },
        }
    }
</script>

<style scoped>
    #id_img:hover {
        cursor: pointer;
    }

    .ranklist {
        padding-right: 10px;
    }

    .container {
        margin: 0 auto;
        min-width: 1200px;
    }

    .container {
        width: 1200px;
        margin: 0 auto;
    }


    .man-t4-list {
        /*float: left;*/
        width: 262px;
        border: 1px #2b9de4 solid;
        height: 560px;
        margin-top: 15px;
        margin-right: 43px;
        line-height: 200%;
        margin-left: -28px;

    }

    .man-t1-title {
        height: 36px;
        background: #2b9de4;
        color: #fff;
        padding: 0 15px;
    }

    .a-link-white, .a-link-white a, .a-link-white a:link, .a-link-white:link {
        color: #fff;
    }


    .more-link {
        font-size: 12px;
        float: right;
        line-height: 36px;
    }

    h3 {
        font-size: 16px;
        font-weight: bold;
        line-height: 180%;
    }

    h3 {
        display: block;
        font-size: 1.17em;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        font-weight: bold;
    }

    .man-t4-list ul {
        padding: 8px;
    }

    .man-t4-list ul li {
        padding: 13px 0;
        border-bottom: 2px #e6e6fa dashed;
        height: 103px;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    a, a:link {
        text-decoration: none;
        color: #333;
    }

    .man-t4-list ul li img {
        width: 60px;
        height: 80px;
        float: left;
        margin: 0 10px;
    }

    img {
        border: 0;
    }

    a {
        text-decoration: none;

    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }
</style>